// import { guid } from "./guid";
import { htmltoelement } from "./htmltoelement";

export async function highlightmath(
    element: Element,
    stylecssrules: Set<string>,
    pre: HTMLElement | null
) {
    const language =
        [...element.classList.values()]
            .filter((s) => s.startsWith("language-"))[0]
            ?.slice("language-".length) ||
        ("" as "latex" | "mathml" | "asciimath");
    if (!["latex", "mathml", "asciimath"].includes(language)) {
        return;
    }
    const code = element.textContent?.trim();
    if (!code || !language) {
        return;
    }

    const parent = document.createElement("div");
    parent.setAttribute("class", "position-relative");

    pre?.insertAdjacentElement("afterend", parent);

    const container = document.createElement("div");
    parent.appendChild(container);
    container.classList.add("math-container");
    // element.parentNode?.appendChild(container);
    //@ts-ignore
    const rendermathjax: (
        code: string,
        language: "latex" | "mathml" | "asciimath",
        container: HTMLElement,
        stylecssrules: Set<string>
        //@ts-ignore
    ) => Promise<void> = (await import("./rendermath.cjs")).default;
    // console.log(rendermathjax);
    await rendermathjax(
        code,
        language as "latex" | "mathml" | "asciimath",
        container,
        stylecssrules
    );
    // const codecontenguid = "clip-" + guid();
    const button = htmltoelement(
        `<button class="btn btn-outline-primary mybutton-8731e6c5bb5148e49e14cca7cdfa73e8 clipbutton position-absolute right-0 top-0"><span class="clipboard-icon"></span></button>`
    );
    button.setAttribute("data-clipboard-text", code);
    container.insertAdjacentElement("afterend", button);
    element.remove();
    pre?.remove();
}
